<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Vasi District Navigator</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <style type="text/css">
	table, th, td {
		font-family: sans-serif;
		border: 1px solid #003;
		padding: 6px;

	}
	a {
		color: white;
		text-decoration: none;
	}

	span#district, span#district a {
		font-size: 14pt;
		color: black;
	}
	span.coord {
		font-size: 8pt;
	}

	th {
		background-color: #aaa;
	}

	th.sub, td.side {
		background-color: #666;
		color: aaa;
		font-size: 8pt;
	}

	td {
		background-color: #666;
		font-size: 10pt;
	}

	img#marker {
		position:absolute;
		top: 60px;
		left: 75px;
	}
  </style>
<script type="text/javascript">
//<![CDATA[
districts = [
    "01 Sabian Tower",
    "02 Marcel Duchamp Block",
    "03 Chi'binskaya",
    "04 Falluci",
    "05 Desert of the Real",
    "06 Lionsgate",
    "07 Agora",
    "08 Joseph Beuys Block",
    "09 Golden Palace",
    "10 Noble Houses & Ministry of Justice",
    "11 Vats",
    "12 Dirant",
    "13 Citadel",
    "14 Joseph Cornell Block",
    "15 Ssendam Spit",
    "16 Varanasi Steps",
    "17 Y'ha-nthlei Gate",
    "18 HMS Guerilla Ontology",
    "19 Docklands",
    "20 William S. Burroughs Block",
    "21 The D.'.Z.'. Ziggurat",
    "22 Planetarium",
    "23 Warehouse District",
    "24 Spicers' District",
    "25 Shipyards",
    "26 Philip K. Dick Block",
    "27 Polashii",
    "28 Death Factory",
    "29 Emporium of Blasphemous Delights",
    "30 Shooting Galleries",
    "31 Great Library of Celaeno",
    "32 William Gibson Block",
    "33 Too Dark Park",
    "34 Hofstadter Markets",
    "35 Black Light District",
    "36 Rats Nest",
    "37 Vicus Lusorum & Guild of the Cant",
    "38 J.G. Ballard Block",
    "39 Dyvers City",
    "40 Circus",
    "41 Necropolis",
    "42 Burning Towers",
    "43 Placa Real & Via Modesta Valenti",
    "44 Francis Bacon Block",
    "45 Cat's Cradle",
    "46 Fourth Square",
    "47 Seven Temples",
    "48 Bridge",
    "49 Terminus Station",
    "50 Morningstar"
]

boulevards = [
  "Understanding",
  "Speech",
  "Livelihood",
  "Concentration",
  "Mindfulness",
  "Effort",
  "Action",
  "Intention"]

avenues = [
"Sun",
"Moon",
"Mercury",
"Venus",
"Mars",
"Jupiter",
"Saturn"]

base_url = "https://sites.google.com/site/vaultaa23/the-planes/02-the-zone/vaz1-vasi/domains-sub-realities/"
street_base_url = base_url + "boulevards-avenues/"
district_base_url = base_url + "domains-sub-realities/"
wiki_link = true

function group (district)  {
	var rings = 7;	
	return Math.floor((district-2)/(rings-1));
}

function ring (district) {
	r = (district-1) % 6;
	if (r == 0) {
		r = 1;
	} else {
		r = 7 - r;
	}
	return r;
}

function districtLink (d) {
	if (d == 0) {
		d = 48;	
	}
	if (d == 1) {
		d = 49;	
	}
	if (d == -1) {
		d = 1;	
	}
	var out = "<a href='" + district_base_url + districts[d-1].replace(/[ \.&\']+/g ,"-").toLowerCase() + "'>" + districts[d-1] + "</a>";

	if (wiki_link) {
		return out;
	} else {
		return "<a href='?d="+d+"'>" + districts[d-1] + "</a>";
	} 
}

function boulevardLink (b) {
	return "<a href='" + street_base_url + boulevards[b].toLowerCase() + "-boulevard'>" + boulevards[b] + " Boulevard</a>";
}

function avenueLink (a) {
	return "<a href='" + street_base_url + avenues[a].toLowerCase() + "-avenue'>" + avenues[a] + " Avenue</a>";
}

function draw () {
	//var d = parseInt(prefs.getString("district"));
	//var wiki_link = prefs.getBool("wiki_links");

	var q = location.search;
	q = q.slice(q.indexOf("=")+1, q.length);
	d = parseInt(q);
	if (d == 1) { 
		d = -1;
	}
	//document.getElementById("test").innerHTML = "Group: " + group(d) + " Ring: " + ring(d) + "test ";
	document.getElementById("district").innerHTML = districtLink(d) + " <span class='coord'>{" + (group(d)+1) + ", " + ring(d) + "}</span>";
	//alert(d);
	if ((d != -1) && (d != 50)) {
		document.getElementById("boul_ac").innerHTML = boulevardLink(group(d)); 
		document.getElementById("boul_cw").innerHTML = boulevardLink((group(d)+1)%boulevards.length);
	
		document.getElementById("av_in").innerHTML = avenueLink(ring(d)-1);
		document.getElementById("av_out").innerHTML = avenueLink(ring(d));
	
	
		document.getElementById("ac_neighbour").innerHTML = districtLink(((d-6)+48)%48);
		document.getElementById("cw_neighbour").innerHTML = districtLink((d+6)%48);
		if (ring(d) == 1) {
			document.getElementById("in_neighbour").innerHTML = districtLink(-1);
		} else {
			document.getElementById("in_neighbour").innerHTML = districtLink(d+1);
		}
		if (ring(d) == 6) {

		} else {
			document.getElementById("out_neighbour").innerHTML = districtLink(d-1);
		}
		// position district marker
		var theta = (2*Math.PI / 8) * (group(d)+0.5); // + Math.PI/8;
		//alert(theta);
		var y = (ring(d))*9;
		var x = -Math.sin(theta)*y;
		y = Math.cos(theta)*y;
		//alert(y);
		document.getElementById("marker").style.top = 74 - y;
		document.getElementById("marker").style.left = 74 - x;

	} else if (d == -1) { // -1 Sabian Tower
		document.getElementById("marker").style.top = 80;
		document.getElementById("marker").style.left = 80;
		document.getElementById("in_neighbour").innerHTML = districtLink(50);
		document.getElementById("av_out").innerHTML = avenueLink(0);
	} else {  // 50 Morningstar
		document.getElementById("in_neighbour").innerHTML = districtLink(-1);
		document.getElementById("marker").style.top = 80;
		document.getElementById("marker").style.left = 80;
	}
	
}
// ]]>
</script>
</head>
<body onload="draw();">
<table>
  <tr>
    <td rowspan="2"><img src="vasi.png" alt="Vasi Grid" height="120"/> <img id="marker" alt="marker" src="dot.png"/></td><th colspan="3"><span id="district"></span></th>
  </tr>
  <tr>
    <th class="sub">Boundaries</th><th class="sub">Neighbouring Districts</th>
  </tr>
  <tr>
    <td class="side">Outer</td><td><span id="av_out"></span></td><td><span id="out_neighbour"></span></td>
  </tr>
  <tr>
    <td class="side">Inner</td><td><span id="av_in"></span></td><td><span id="in_neighbour"></span></td>
  </tr>
  <tr>
    <td class="side">Anti-Clockwise</td><td><span id="boul_ac"></span></td><td><span id="ac_neighbour"></span></td>
  </tr>
  <tr>
    <td class="side">Clockwise</td><td><span id="boul_cw"></span></td><td><span id="cw_neighbour"></span></td>
  </tr>
</table>

<!-- img src="VAZ1_map.jpg" / -->

</body>
</html>
